/* eslint-disable */
import React, { useEffect, useState } from 'react';
import { connect } from 'dva';
import { Card, Table, Button } from 'antd';
import styles from './Home.less';

import { formatNoFixed, emptyText, reservedDecimalPlace } from '../../utils/commonUtil';

const ListOfAccountsReceivable = (props) => {
  const { pageTump, homeModel } = props;
  const { accordingTotal, } = homeModel;
  const [height, setHeight] = useState()

  const list = accordingTotal ? accordingTotal["前十大应收账款清单"].filter(item => !!item) : []
  list.forEach((item, index) => item.id = index)

  useEffect(() => {
    const dom = document.getElementById("cardHeight2")
    const height = dom ? dom.clientHeight - 44 - 32 - 46 : 0
    setHeight(height)
  })

  const columns = [
    { title: '归属机构', dataIndex: 'affiliatedInstitutionName', key: 'affiliatedInstitutionName', ellipsis: true, width: 100, },
    { title: '客户名称', dataIndex: 'counterpartyName', key: 'counterpartyName', ellipsis: true, width: 80 },
    { title: '主数据编码', dataIndex: 'masterDataEncoding', key: 'masterDataEncoding', ellipsis: true, width: 80 },
    {
      title: '应收金额', dataIndex: 'actuallyTake', key: 'actuallyTake', width: 80,
      render: (text, record, index) => text ?
        <Button type="link" style={{ color: "#3095B4" }} size="small" onClick={() => pageTump("accountsReceivable", {
          counterpartyName: record.counterpartyName, affiliatedInstitutionName: record.affiliatedInstitutionName
        })}>{formatNoFixed(reservedDecimalPlace(text, 2))}</Button>
        : null,
    },
  ];

  // const list = [
  //   { id: 1, counterpartyName: "中航国际矿产资源有限公司", masterDataEncoding: "1000001", actuallyTake: 150000, affiliatedInstitutionName: "中国样本公司", },
  //   { id: 2, counterpartyName: "北京悦昌行科技有限公司", masterDataEncoding: "1000002", actuallyTake: 150000, affiliatedInstitutionName: "中国样本公司", },
  //   { id: 3, counterpartyName: "合肥帝品数码科技有限公司", masterDataEncoding: "1000003", actuallyTake: 150000, affiliatedInstitutionName: "中国样本公司", },
  //   { id: 4, counterpartyName: "大连善德来生活用品有限公司", masterDataEncoding: "1000004", actuallyTake: 150000, affiliatedInstitutionName: "中国样本公司", },
  //   { id: 5, counterpartyName: "天地国际运输代理有限公司", masterDataEncoding: "1000005", actuallyTake: 150000, affiliatedInstitutionName: "中国样本公司", },
  //   { id: 6, counterpartyName: "慧翰微电子股份有限公司", masterDataEncoding: "1000006", actuallyTake: 350000, affiliatedInstitutionName: "中国样本公司", },
  //   { id: 7, counterpartyName: "格舒宝（厦门）工贸有限公司", masterDataEncoding: "1000007", actuallyTake: 150000, affiliatedInstitutionName: "中国样本公司", },
  //   { id: 8, counterpartyName: "江苏理研科技股份有限公司", masterDataEncoding: "1000008", actuallyTake: 150000, affiliatedInstitutionName: "中国样本公司", },
  //   { id: 9, counterpartyName: "深圳市易凯国际旅游有限公司", masterDataEncoding: "1000009", actuallyTake: 150000, affiliatedInstitutionName: "中国样本公司", },
  //   { id: 10, counterpartyName: "陶氏（上海）投资有限公司", masterDataEncoding: "10000010", actuallyTake: 150000, affiliatedInstitutionName: "中国样本公司", },
  // ]

  return (
    <div className={styles.cardBorder}>
      <Card style={{ height: "100%" }} id="cardHeight2">
        <div className={styles.myChart}>
          <div className={styles.cardHeader}>前十大应收客户清单</div>
          <div className={styles.tableStyle}>
            <div className={styles.line1}></div>
            <div className={styles.line2}></div>
            <Table
              size="small"
              columns={columns}
              dataSource={list}
              pagination={false}
              scroll={{ y: height }}
              rowKey={record => record.id}
              locale={{ emptyText }}
            />
          </div>
        </div>
      </Card>
    </div>
  );
}

function mapStateToProps({ homeModel }) {
  return { homeModel };
}

export default connect(mapStateToProps)(ListOfAccountsReceivable);
